<!DOCTYPE html>
<html lang="zh">
<head>
    <title>商户中心</title>
    <{include file="merchant/public/header"}>
    <{include file="merchant/public/data_tables_css"}>

</head>
<body class="hold-transition sidebar-mini layout-fixed">
<!-- Site wrapper -->
<div class="wrapper">
    <!-- Navbar -->
    <{include file="merchant/public/navbar"}>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <!--左侧菜单-->
    <{include file="merchant/public/sidebar"}>

    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>订单管理</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="<{:url('index')}>">首页</a></li>
                            <li class="breadcrumb-item"><a href="#">订单管理</a></li>
                            <li class="breadcrumb-item active">订单统计</li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="row">

                    <div class="col-lg-4 col-6">
                        <!-- small box -->
                        <div class="small-box bg-warning">
                            <div class="inner">
                                <h3><{$data.order?$data.order:'0'}></h3>

                                <p>当前单量</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-stats-bars"></i>
                            </div>
                            <a href="<{:url('index')}>" class="small-box-footer">查看更多 <i class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-6">
                        <!-- small box -->
                        <div class="small-box bg-danger">
                            <div class="inner">
                                <h3><{$data.order_need_send?$data.order_need_send:'0'}></h3>

                                <p>待发货</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-stats-bars"></i>
                            </div>
                            <a href="<{:url('index')}>" class="small-box-footer">查看更多 <i class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-4 col-6">
                        <!-- small box -->
                        <div class="small-box bg-success">
                            <div class="inner">
                                <h3><{$data.order_pay_rate?$data.order_pay_rate:'0'}><sup style="font-size: 20px">%</sup></h3>

                                <p>已付款订单比例</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-stats-bars"></i>
                            </div>
                            <a href="<{:url('index')}>" class="small-box-footer">查看更多 <i class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>


                </div>


                <!-- LINE CHART -->
                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title">最近订单数据(缓存60秒)</h3>

                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-tool" data-card-widget="remove">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="main"  style="width: 100%;height: 600px;margin-top: 20px"></div>
                    </div>
                </div>

            </div>
        </section>

    </div>


</div>
<!-- ./wrapper -->

<{include file="merchant/public/footer"}>
<!-- echarts -->
<script src="/static/adminlte/plugins/echarts/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var dataX = [<{$data.tongji.x}>];
    var dataY = [<{$data.tongji.order}>];
    // 指定图表的配置项和数据
    var option = {
        title : {
            text: '收入金额',
            subtext: '单位(元)'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['订单量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar','tiled','stack']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : dataX,
                name:'日'
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'交易',
                type:'bar',
                data:dataY,
                /*markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                },*/
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        color:'#cc1828'
                    }
                },
                color:'rgba(66,255,38,0.83)',
            },
        ]
    };


    //清空画布，防止缓存
    myChart.clear();
    //使用刚指定的配置项和数据显示图表。
    myChart.setOption(option,true);
</script>
</body>
</html>
